<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>

    <style>
/*标签名选择器*/
h4{
    color: red;
}
div{
    width: 100px;
    height: 100px;
    background-color: aqua;
}

/* id选择器 */
#d2{
    border: 1px solid saddlebrown ;
}

/* 类选择器 */
.error{
    background-color: red;
}
.success{
    background-color: blue;
}
.meg{
    color:white ;
}
/* 伪类选择器  :hover选中元素的悬停状态*/
/* 紧挨着写是与的关系，必须满足所有条件才生效*/
#d2:hover{
    background-color: yellow;
}
/* 群组选择器，逗号隔开，是或的关系 只要满足其中一个即可*/
#d2,h4,.error{
    /* 文本修饰 下划线*/
    text-decoration:underline ;
}

/* 通配选择器：选中所有的元素*/
*{
    /* 文字样式：斜体*/
    font-style: italic;
}

/* 属性选择器 */
input[type="text"]{
    background-color: yellow;
}
/* 伪类选择器 */
/*4  个顺序必须如次 link visited hover active*/
a:link{
    /* 超链接未被访问过的状态*/
    color: gray;
}
a:visited{

    color: green;
}
a:hover{
    color:orange;
}
a:active{
    color: red;
}
/* 后代选择器 */
div span{
    color: orange;
}
/* 子代选择器 */
#d1>div>span{
    color: red;
}
    </style>
</head>
<body>

<div id="d1">
    <span>1</span>
    <div>
        <span>2</span>
        <b>测试文字</b>
        <p>我是 <span>测试</span>段落</p>
    </div>
    <span>3</span>
</div>
<hr>

<a href="https://www.baidu.com"></a>
<a href="aaa"></a>
<hr>
<input type="text">
<input type="possword">
 <h4>我是标题</h4>
<p>我是段落</p>
 <a href="#">我是超链接</a>
<h4 id = "d2">我是标题2</h4>
<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>
 <hr>
 <span class = "error meg">用户名被占用</span>
 <span class = "error meg">密码输入错误</span>
 <span class = "error meg">手机格式错误</span>
 <br>
 <span class = "success meg">用户名正确</span>
 <span class = "success meg">密码正确</span>
 <span class = "success meg">验证码正确</span>
 <hr>

</body>
</html>